<template>
  <div>
    <!-- 评论框 -->
    <div class="comment_warp">
      <div class="comment_top">
        <h3>发表评论</h3>
        <textarea :value="content" @change="handleTextInput" placeholder="请输入留言"></textarea>
        <van-button type="info" size="large" class="comment_btn" @click="submitComment">发表评论</van-button>
      </div>
      <div class="comment_content">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell v-for="(item,i) in commentList" :key="i" class="comment_floor_wrap">
            <div class="comment_user">
              <span>第{{i}}楼</span>
              <span>用户:{{item.user_name}}</span>
              <span>发表时间:{{item.add_time | dateFormat}}</span>
            </div>
            <div class="comment_content_message">{{item.content}}</div>
          </van-cell>
          <van-button type="warning" size="large" plain class="comment_btn" @click="getMore()">加载更多</van-button>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 接收父组件传递过来的id
  props: {
    // 暂时不做合法性校验  String,Number都可以
    id: {
      default: () => 1
    }
  },
  data() {
    return {
      // 上拉加载
      loading: false,
      // 上拉加载完毕
      finished: false,
      // 分页页码
      pageindex: 1,
      // 评论列表
      commentList: [],
      // 评论内容
      content: ""
    };
  },
  created() {
    this.getComment();
  },
  methods: {
    // 获取评论数据
    async getComment() {
      const { data: res } = await this.$http.get(
        `/api/getcomments/${this.id}?pageindex=` + this.pageindex
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取评论数据失败，请联系管理员");
        return;
      }
      // 拼接数组  对data中的数组 进行 拼接 而不是全部替换!!!
      this.commentList = [...this.commentList, ...res.message];
    },
    // 上啦加载
    onLoad() {
      // 数据更新完毕后
      this.loading = false;
    },
    // 点击 加载更多
    getMore() {
      // 页码++
      this.pageindex++;
      // 发送下一页请求, 获取评论数据
      this.getComment();
    },
    // 监听评论数据
    handleTextInput(e) {
      // 完成评论数据双向绑定
      this.content = e.target.value;
    },
    // 提交评论
    async submitComment() {
      // 评论合法性
      if (!this.content.trim()) {
        // 不合法
        this.$toast("评论不能为空");
        return;
      }
      // 发送请求
      const { data: res } = await this.$http.post(
        `/api/postcomment/${this.id}`,
        {
          content: this.content
        }
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("评论数据提交失败，请联系管理员");
        return;
      }
      // 清空输入域的内容
      this.content = "";
      // 分页页码更改为第一页
      this.pageindex = 1;
      // 重新发送请求, 这里不能直接调用获取评论数据， 会与 【加载更多】功能冲突
      // 暂时不封装函数了， 手动发送请求， 获取数组， 直接赋值，不需要合并之前的数组
      // this.getComment(); 错误的写法
      const {data:result} = await this.$http.get(
        `/api/getcomments/${this.id}?pageindex=` + this.pageindex
      );
      if (result.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取评论数据失败，请联系管理员");
        return;
      }
      // 对data中的数组 进行 赋值!!!
      this.commentList = result.message;
      // 提示用户提交评论成功
      this.$toast("评论提交成功");
    }
  }
};
</script>

<style lang="less" scoped>
.comment_warp {
  padding-bottom: 50px;
  .comment_top {
    h3 {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }
    textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
    }
    .comment_btn {
      width: 100% !important;
    }
  }
  .comment_content {
    margin-top: 5px;
    .comment_floor_wrap {
      padding: 0;
      width: 100%;
      .comment_user {
        background-color: #ccc;
        height: 30px;
        line-height: 30px;
        span {
          margin-right: 6px;
          font-size: 12px;
        }
      }
      .comment_content_message {
        padding: 5px 0 5px 20px;
      }
    }
  }
}
</style>